<template>
  <div class="main">
    <left class="left"></left>
    <center-content class="content"></center-content>
    <right class="right"></right>
    <auto-adsorb v-if="false" />
<!--    <div class="box-select-content" id="main">
      <div class="elements">
        <div class="element" v-for="item in elements" :key="item.id" :style="setElementStyle(item)"></div>
      </div>
      <box-select element-class="element" />
    </div>-->
  </div>
</template>

<script>

import Left from './left'
import CenterContent from './center'
import Right from './right'
import AutoAdsorb from '@/components/autoAdsorb/index'
import BoxSelect from '@/components/boxSelect/index'

export default {
  name: 'Test',
  data() {
    return {
      data: [],
      elements: []
    }
  },
  components: {
    BoxSelect,
    AutoAdsorb,
    Left,
    CenterContent,
    Right
  },
  mounted() {
    this.generateElement()
  },
  methods: {
    generateElement() {
      const colors = ['#2d8cf0', '#2df04d', 'red', '#F0982D', '#B62DF0', '#2df085', '#310644', '#415238', '#38524F', '#04EAD0']
      for (let i = 0; i < 10; i++) {
        const element = {
          id: i,
          width: 100,
          height: 200,
          top: parseInt(Math.random() * 500),
          left: parseInt(Math.random() * 1500),
          color: colors[i],
          rotate: parseInt(Math.random() * 360)
        }
        this.elements.push(element)
      }
    },
    setElementStyle(data) {
      return {
        width: data.width + 'px',
        height: data.height + 'px',
        top: data.top + 'px',
        left: data.left + 'px',
        background: data.color,
        transform: `rotate(${data.rotate}deg)`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  .left {
    width: 400px;
    height: 100%;
  }

  .content {
    flex-grow: 1;
    height: 100%;
  }

  .right {
    width: 600px;
    height: 100%;
  }
}

.box-select-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  //height: 100%;
  height: 3000px;
  background: #fff;

  .elements {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;

    & > .element {
      position: absolute;
      background: #04ead0;
    }
  }
}
</style>
